<template>
  <div class="app-container">
    <h1>App根组件</h1>

    <a href="#/home">首页</a>
    <a href="#/movie">电影</a>
    <a href="#/about">关于</a>
  <hr/>
    <component :is = "comName"></component>
  </div>
</template>

<script>

import myHome from "@/components/myHome";
import myMovie from "@/components/myMovie";
import myAbout from "@/components/myAbout";
export default {
  data(){
    return{
      comName:'myHome'
    }
  },
  created(){
    //只要当前的App组件一被创建，就立即监听window对象的onhashchange事件
    window.onhashchange = () =>{
      console.log('监听到了hash地址的变化',location.hash )
      switch(location.hash){
        case '#/home':
          this.comName = 'myHome'
              break
        case '#/movie':
          this.comName = 'myMovie'
              break;
        case '#about':
          this.comName = 'About'
              break
      }
    }
  },
  components:{
    myHome,
    myMovie,
    myAbout
  }
}
</script>

<style lang="less" scoped>
.app-container {
  background-color: #efefef;
  overflow: hidden;
  margin: 10px;
  padding: 15px;
> a {
  margin-right: 10px;
}
}
</style>
